<template>
  <div class="collects-box">
    <VideoCard :video="videos">
      <template #operator="{id}">
        <el-button @click="deletes(id)" type="danger" :icon="Delete" circle />
      </template>
    </VideoCard>
  </div>


</template>

<script lang="ts" setup>
import {Operation,Delete} from "@element-plus/icons-vue"
import VideoCard from "@/components/VideoCard.vue";
import { computed, onMounted, ref } from "vue";
import GetRequest from "util/requests/getRequest";
import DeleteRequest from "util/requests/deleteRequest";
import { ElMessage } from "element-plus";
import { userInfoStore } from "store/userInfo";
import { countStore } from "store/count";

const count =countStore()
const videos = ref([])
const collects =ref([])
const getRequest = new GetRequest();
const deletes = (id)=>{
      const collectId = collects.value.filter(item=>item.videoId==id)[0].id;
      console.log(collectId);
      new DeleteRequest().deleteCollect({id:collectId}).then(
        (res:any)=>{
            // console.log(res);
            if(res.code==200){
              videos.value = videos.value.filter(item=>item.video.id!=id);
              count.setCount(videos.value.length)
              ElMessage({
                dangerouslyUseHTMLString: true,
                message: res.msg,
                type:"success"
              })
              // console.log(videos.value);
            }
          }
      )

}
onMounted(()=>{
        getRequest.getUserColletct({userId:userInfoStore().userInfo.LoginUser.id}).then((res:any)=>{
          // console.log(res);
          if(res.code==200){
            collects.value =res.obj
            count.setCount(res.obj.length)
            res.obj.forEach((item,index)=>{
                  getRequest.getVideoById({videoId:item.videoId}).then((res1:any)=>{
                    // console.log(res1);
                    videos.value.push({
                      video:res1.obj
                    });
                  })
            })
          }
        })
})
</script>

<style scoped>

.collects-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>